<template>
	<view>
		<u-swiper :list="list"></u-swiper>
		<view class="content">
			<view class="title-l">
				<text class="name">景点名称</text>

				<u-tag text="一级景点" type="primary" shape="circle"></u-tag>

			</view>
			<view class="group-title">
				<u-icon name="clock" color="rgb(46,167,128)" size="20"></u-icon>
				<text class="name">开放时间</text>
			</view>
			<view class="time-list">
				<text>淡季：09：00 - 12：00</text>
				<text>旺季：09：00 - 12：00</text>
			</view>
			<view class="group-title">
				<u-icon name="clock" color="rgb(46,167,128)" size="20"></u-icon>
				<text class="name">推荐游玩季节</text>
			</view>
			<view class="time-list">
				<text>春季、夏季</text>
			</view>
			<view class="group-title border">
				<u-icon name="map-fill" color="#999" size="20"></u-icon>
				<text class="name" style="color: #999;">生态景点</text>

				<view class="dh">
					<text>导航</text>
					<u-icon name="arrow-right" color="#999" size="20"></u-icon>
				</view>
			</view>
			
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			};
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 22upx 30upx;
		box-sizing: border-box;
	}

	.title-l {
		display: flex;
		align-items: center;

		.name {
			margin: 12upx 0;
			font-size: 40upx;
			margin-right: 12upx;
		}
	}

	.time-list {
		display: flex;

		text {
			white-space: nowrap;
			margin-right: 30upx;
			font-size: 32upx;
			color: #666;
		}
	}

	.group-title {
		display: flex;
		align-items: center;
		padding: 12upx 0;
		font-size: 32upx;
		margin-top: 22upx;
		color: $uni-color-bg-z;

		.dh {
			display: flex;
			color: #999;
			margin-left: auto;
		}

		.name {
			margin-left: 12upx;
		}
	}
	.border{
		border-bottom: 1upx solid $uni-border-color;
		padding-bottom: 22upx;
	}
</style>